<template>
  <form @submit="formSubmit" @reset="formReset">

    <view class="form-item">
      <view class="label">姓名</view>
      <input class="input-box" name="nickname" placeholder="请输入姓名" />
    </view>


    <view class="form-item">
      <view class="label">性别</view>
      <radio-group name="gender" @change="onGenderChange" class="radio-group">
        <label class="radio-item">
          <radio value="男" /> 男
        </label>
        <label class="radio-item">
          <radio value="女" /> 女
        </label>
      </radio-group>
    </view>

    <view class="form-item">
      <view class="label">爱好</view>
      <checkbox-group name="loves" @change="onLovesChange" class="checkbox-group">
        <label class="checkbox-item">
          <checkbox value="睡觉" /> 睡觉
        </label>
        <label class="checkbox-item">
          <checkbox value="吃饭" /> 吃饭
        </label>
      </checkbox-group>
    </view>

    <view class="form-item">
      <view class="label">年龄</view>
      <slider value="18" name="age" show-value class="slider-box"></slider>
    </view>

    <view class="form-item">
      <view class="label">保留选项</view>
      <switch checked="true" name="reserve" @change="switchChange"></switch>
    </view>

    <view class="form-btn">
      <button form-type="submit" type="primary" class="btn-submit">Submit</button>
    </view>
    <view class="form-btn">
      <button form-type="reset" type="default" class="btn-reset">Reset</button>
    </view>

  </form>
</template>

<script>
import graceChecker from "@/pages/lib/graceChecker.js";

export default {
  methods: {
    formSubmit(e) {
      console.log('form发生了submit事件，携带数据为: ', e.detail.value);

      var rule = [
        { name:"nickname", checkType:"string", checkRule:"1,3", errorMsg:"姓名应为1-3个字符" },
        { name:"gender", checkType:"in", checkRule:"男,女", errorMsg:"请选择性别" },
        { name:"loves", checkType:"notnull", checkRule:"", errorMsg:"请选择爱好" }
      ];

      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);

      if(checkRes){
        uni.showToast({ title:"验证通过!", icon:"none" });
      } else {
        uni.showToast({ title: graceChecker.error, icon:"none" });
      }

      uni.showModal({
        content: '表单数据内容：' + JSON.stringify(e.detail.value),
        showCancel: false
      });
    },

    formReset(e){
      console.log('清空数据');
    },

    onGenderChange(e){
      console.log("性别选择：", e.detail.value)
    },

    onLovesChange(e){
      console.log("爱好选择：", e.detail.value)
    },

    switchChange(e){
      console.log("开关状态：", e.detail.value)
    }
  }
}
</script>

<style>
.form-item {
  display: flex;
  flex-direction: column;
  margin: 15rpx 0;
}

.label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.input-box {
	margin-left: 0.5%;
  padding: 20rpx 20;
  border: 1px solid #ccc;
  border-radius: 8rpx;
  font-size: 35rpx;
}

.radio-group, .checkbox-group {
  display: flex;
  gap: 40rpx;
}

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.slider-box {
  margin-top: 10rpx;
}

.form-btn {
  margin-top: 10rpx;

}

.btn-submit, .btn-reset {
  width: 90%;
  border-radius: 88rpx;
  font-size: 30rpx;
  padding: 10rpx 0;
}
</style>
